<template>
  <div class="new_div1">
    <el-dialog
      open-delay="0"
      close-delay="0"
      v-model="openUp"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      @close = "share_cancel"
      title="订单列表"
      width="85%"
      draggable
    >
      <div>
        <el-form ref="formQuery" label-width="70px" :model="formList">
          <el-row :gutter="24" justify="space-around">
            <el-col v-bind="colLayout">
              <div>
                <el-form-item style="width: 100%" label="单据号" prop="groupOrderSn">
<!--                  <el-input  v-model="formList.groupOrderSn"  @keydown.enter="query(formList)" clearable/>-->
<!--                  <VabSelectForm v-if="groupOrderSnList.length >0"  v-model="formList.groupOrderSn" :options="groupOrderSnList" />-->
                  <RollSelect type="1"  style="width: 100%"  v-model="formList.groupOrderSn"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout">
              <div>
                <el-form-item style="width: 100%" label="客户" prop="customerUid">
                  <VabSelectForm v-if="customer_list.length >0"  v-model="formList.customerUid" :options="customer_list" />
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout">
              <div>
                <el-form-item class="customerDiv3" label="销售组织" prop="salesOrgId">
                  <VabSelectForm  v-if="sales_org_list.length >0"  v-model="formList.salesOrgId" :options="sales_org_list"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout">
              <div>
                <el-form-item class="customerDiv3" label="产品名称" prop="goods_name">
                  <SelectLoading type="name"  style="width: 100%" :multiple="true" v-model="formList.goods_name"  userOrgId="1" />
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout" >
              <div>
                <el-form-item class="customerDiv3" label="产品编码" prop="goods_no">
                  <SelectLoading type="number"  style="width: 100%" :multiple="true" v-model="formList.goods_no"  userOrgId="1" />
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout">
              <div>
                <el-form-item style="width: 100%" label="订单编号" prop="orderSn">
                  <RollSelect type="2"  style="width: 100%"  v-model="formList.orderSn"/>
<!--                  <VabSelectForm v-if="orderSnList.length >0"  v-model="formList.orderSn" :options="orderSnList" />-->
<!--                  <el-input  v-model="formList.orderSn"  @keydown.enter="query(formList)" clearable/>-->
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout1">
              <div class="button-query">
                <el-button @click="query(formList)" type="primary">
                  查询
                </el-button>
                <el-button v-debounce="resetting">
                  重置
                </el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="tabStyle" style="margin-top: 10px">
<!--        @expand-change="expandClick"-->
        <el-table
          v-loading="loading"
          load="false"
          border
          :data="salesOrderList"
          height="450px"
          style="width: 100%"
          @expand-change="expandClick"
          row-key="id"
          :expand-row-keys="[salesOrderList[0]?.id]"
        >
          <el-table-column type="expand" fixed="left" >
            <template #default="props" >
              <div  class="tabTh">
                <el-table  ref="multipleTableRef" border :data="props.row.detail" max-height="210px"  @selection-change="handleSelectionChange" >
                  <el-table-column type="selection" width="55" :selectable="selectable"/>
                  <el-table-column label="序号" align="center" width="80">
                    <template #default="scope">
                      <div class="table_style">
                          <span style="margin-left: 5px"
                                v-text="(props.$index+1)+'.'+(scope.$index + 1)"
                          ></span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="订单编号" align="center" width="150">
                    <template #default="scope">
                       <span
                         class="ellipsis"
                       >
                         {{scope.row.order_uid || '--' }}
                       </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="产品类型" align="center" width="150">
                    <template #default="scope">
                       <span
                         @click="flowClick(scope.row.status)"
                         class="ellipsis"
                       >
                         {{scope.row.goods_type || '--'}}
                       </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="产品编码" align="center" min-width="200">
                    <template #default="scope">
                       <span
                         class="ellipsis"
                         v-text="_FieldFormat(scope.row.goods_no,  '')"
                       ></span>
                    </template>
                  </el-table-column>
                  <el-table-column label="产品名称" align="center" width="150">
                    <template #default="scope">
                         <span
                           class="ellipsis"
                           v-text="_FieldFormat(scope.row.goods_name,  '')"
                         ></span>
                    </template>
                  </el-table-column>
                  <el-table-column label="销售数量" align="center" width="150">
                    <template #default="scope">
                           <span
                             class="ellipsis numberMoney"
                             v-text="_FieldFormat(scope.row.sales_num,  '')"
                           ></span>
                    </template>
                  </el-table-column>
                  <el-table-column label="出库数量" align="center" width="150">
                    <template #default="scope">
                           <span
                             class="ellipsis numberMoney"
                             v-text="_FieldFormat(Number(scope.row.actual_qty).toFixed(0),  '')"
                           ></span>
                    </template>
                  </el-table-column>
                  <el-table-column label="批次号" align="center" width="150">
                    <template #default="scope">
                           <span
                             class="ellipsis"
                             v-text="_FieldFormat(scope.row.batch_no,  '')"
                           ></span>
                    </template>
                  </el-table-column>
                  <el-table-column label="有效期至" align="center" width="150">
                    <template #default="scope">
                           <span
                             class="ellipsis"
                             v-text="_FieldFormat(scope.row.expire_date,  '')"
                           ></span>
                    </template>
                  </el-table-column>
                  <el-table-column label="仓库" align="center" width="150">
                    <template #default="scope">
                           <span
                             class="ellipsis numberMoney"
                             v-text="_FieldFormat(scope.row.order_warehouse_name,  '')"
                           ></span>
                    </template>
                  </el-table-column>
                  <el-table-column label="出库单号" align="center" width="150">
                    <template #default="scope">
                           <span
                             class="ellipsis numberMoney"
                             v-text="_FieldFormat(scope.row.delivery_order_id,  '')"
                           ></span>
                    </template>
                  </el-table-column>
                  <el-table-column label="订单类型" align="center" width="150">
                    <template #default="scope">
                           <span
                             class="ellipsis"
                             v-text="_FieldFormat(scope.row.order_type_text,  '')"
                           ></span>
                    </template>
                  </el-table-column>
                  <!--                    <el-table-column label="生产日期" align="center" width="150">-->
                  <!--                      <template #default="scope">-->
                  <!--                           <span-->
                  <!--                             class="ellipsis"-->
                  <!--                             v-text="_FieldFormat(scope.row.expire_date,  '')"-->
                  <!--                           ></span>-->
                  <!--                      </template>-->
                  <!--                    </el-table-column>-->
                  <el-table-column label="订单流转状态" align="center" width="150">
                    <template #default="scope">
                           <span
                             class="ellipsis"
                             v-text="_FieldFormat(scope.row.order_status_text,  '')"
                           ></span>
                    </template>
                  </el-table-column>
                  <el-table-column label="销售员" align="center" width="150">
                    <template #default="scope">
                           <span
                             class="ellipsis"
                             v-text="_FieldFormat(scope.row.create_user_name,  '')"
                           ></span>
                    </template>
                  </el-table-column>
                  <el-table-column label="下单时间" align="center" width="150">
                    <template #default="scope">
                           <span
                             class="ellipsis"
                             v-text="_FieldFormat(scope.row.create_time,  '')"
                           ></span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="序号" align="center" width="80">
            <template #default="scope">
              <div class="table_style">
                          <span style="margin-left: 5px"
                                v-text="scope.$index + 1"
                          ></span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="单据号" align="center" min-width="150">
            <template #default="scope">
               <span
                 style="text-align: left"
                 v-text="scope.row.uid"
               ></span>
            </template>
          </el-table-column>

          <el-table-column label="客户" align="center" min-width="130" >
            <template #default="scope">
               <span
                 class="ellipsis "
                 v-text="_FieldFormat(scope.row.customer_name,  '')"
               ></span>
            </template>
          </el-table-column>
          <el-table-column label="销售组织" align="center" width="150">
            <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.sales_org_name,  '')"
               ></span>
            </template>
          </el-table-column>
          <el-table-column label="订单类型" align="center" width="130">
            <template #default="scope">
               <span
                 class="ellipsis"
               >
               {{scope.row.type_text || '--'}}
               </span>
            </template>
          </el-table-column>
          <el-table-column label="单据状态" align="center" width="100" >
            <template #default="scope">
               <span
                 class="ellipsis"
               >
                 {{scope.row.status_text || '--'}}
               </span>
            </template>
          </el-table-column>
          <el-table-column label="销售员" align="center" width="150">
            <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.create_user_name,  '')"
               ></span>
            </template>
          </el-table-column>
          <el-table-column label="下单时间" align="center" width="180">
            <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.create_time,  '')"
               ></span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="customerPagination">
        <el-pagination
          background
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          layout="total, prev, pager, next,sizes, jumper"
          :page-sizes="[20, 50, 100, 200]"
          small="small"
          :total="count_number"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
      <template #footer>
        <span class="dialog-footer customerDialog3">
           <el-button @click="share_cancel">取消</el-button>
          <el-button type="primary"  @click="share_save">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {customer_optionsList} from "/@/api/dms/customer";
import {organization_list} from "/@/api/dms/organization";
import {ref} from "vue";
import {FieldFormat} from "/@/utils/utils";
import {getRefundInfoByOrderDetail, getRefundOrderInfo, getRefundOrderList} from "/@/api/dms/refund";
import {ElMessage} from "element-plus";
import SelectLoading from '/@/components/lazySelect/demo.vue'
import {orderOptions} from "/@/api/dms/order";
import RollSelect from './RollSelect.vue'
const _FieldFormat = (value: string, type = '') => {
  return FieldFormat(value, type)
}
const $emits = defineEmits(['submit'])
const colLayout = {    xs: 24,    sm: 12,    md: 8,    lg: 6,    xl: 6, span:6 }
const colLayout1 = {    xs: 24,    sm: 24,    md: 24,    lg: 12,    xl: 12, span:6 }
// 查询表单实例
const formQuery = ref<any>(undefined)
const formList = ref<any>({
  orderSn:'',
  customerUid:'',
  salesOrgId:'',
  goods_name:'',
  goods_no:'',
  groupOrderSn:'',
})
const queryList = ref<any>({})
// ***********搜索项*******************
const customer_list = ref<any>([])
const sales_org_list = ref<any>([])
// 弹窗
const openUp = ref<boolean>(false)
// **********列表****************
const pageSize = ref(20)
const currentPage = ref(1)
const count_number = ref(0)
const loading = ref<boolean>(false)
const salesOrderList = ref<any>([])
//多选
const multipleTableRef = ref<any>()
const multipleSelection = ref<any>([])
const handleSelectionChange = (val:any) => {
  multipleSelection.value = val
}
const groupOrderSnList = ref<any>([])
const orderSnList =ref<any>([])
const getCustomer=async ()=>{
  // 客户
  await customer_optionsList({is_group:2,name:''}).then((data:any)=>{
    if(data.code == 200){
      customer_list.value = data.data.map((item:any)=> {return {value:item.uid , label:item.name}})
    }
  })
  // 组织
  await  organization_list({}).then((data:any)=>{
    if(data.code == 200){
      sales_org_list.value = data.data.map((item:any)=> {return {value:item.uid , label:item.name}})
    }
  })
 await orderOptions({ column:'order_group_uid' }).then((data:any)=>{
   if(data.code == 200){
     groupOrderSnList.value = data.data.map((item:any)=> {return {value:item , label:item}})
   }
 })
  await orderOptions({ column:'uid' }).then((data:any)=>{
    if(data.code == 200){
      orderSnList.value = data.data.map((item:any)=> {return {value:item , label:item}})
    }
  })
}
// 展开
const expandClick = (row:any)=>{
  const arrList =  multipleSelection.value && multipleSelection.value[0]?.order_group_uid == row.uid || false
if(arrList){
  multipleSelection.value = []
}
}
const getOrderList = (value:any,type=0)=>{
  loading.value = true
  //goods_name:value.goods_name.toString()|| '',goods_no:value.goods_no.toString()
  getRefundOrderList({page:currentPage.value,limit:pageSize.value,...value}).then((data:any)=>{
    if (data.code == 200) {
      loading.value = false
      count_number.value = data.data.total
      salesOrderList.value = data.data.lists.map((i:any)=>{return {...i,children:i.order}})
      if (type == 1) {
        ElMessage.success(`查询成功`)
      } else if (type == 2) {
        ElMessage.success(`重置成功`)
      }
    }

  })
}
// 查询
const query = (value:any)=>{
  queryList.value = {...value,goods_name:value.goods_name.toString()|| '',goods_no:value.goods_no.toString()}
  currentPage.value = 1
  pageSize.value = 20
  getOrderList(queryList.value,1)

}
// 重置
const resetting = ()=>{
  formList.value = {
    orderSn:'',
    customerUid:'',
    salesOrgId:'',
    goods_name:'',
    goods_no:'',
    groupOrderSn:'',
  }
  queryList.value = {}
  currentPage.value = 1
  pageSize.value = 20
  getOrderList(queryList.value,2)
}
// 返回
const share_cancel = ()=>{
  openUp.value = false
  multipleTableRef.value?.clearSelection()
  multipleSelection.value = []
}
// 提交
const share_save = ()=>{
  // console.log(multipleSelection.value,'提交')
  let arr = multipleSelection.value.map((item:any)=> item.order_detail_uid)
  getRefundInfoByOrderDetail({orderDetailUid:arr}).then((data:any)=>{
    if(data.code == 200){
      openUp.value = false
      multipleTableRef.value?.clearSelection()
      $emits('submit',data.data)
      multipleSelection.value = []
      if(data.data.error_info){
        ElMessage.warning(`产品 ${data.data.error_info} 已经创建售后单`)
      }
    }
  })
}
//分页
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getOrderList(queryList.value)

}
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getOrderList(queryList.value)
}
const selectable =(row:any)=>{
  if(multipleSelection.value.length > 0){
    return multipleSelection.value[0].order_group_uid == row.order_group_uid
  }else {
    return true
  }
}
// 单选
const radioIndex = ref<any>(undefined)
// 单选[再次点击可取消]
const handleRadio = (row: any) => {
  if (row.id == radioIndex.value) {
    radioIndex.value = -1
    return
  }
  radioIndex.value = row.id
}
//抛出数据
defineExpose({
  openUp,// 弹窗
})
onMounted(()=>{
  getCustomer()
  getOrderList(queryList.value)
})
</script>

<style lang="scss" scoped>
@import '../index';

</style>
